<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
</head>
<style type="text/css">
    p{
        padding: 5px;
        border: medium double black;
        background-color: lightgray;
        font-family: sans-serif;
    }
    #banana{
        font-size: large;
        border: medium solid black;
       /* 动画可以直接应用到初始 ，过渡需要从开始先等hover一次*/
    }
    #apple{
        font-size: large;
        border: medium solid black;
        /* 多个元素可以关联同一个GrowShrink */
       /* 动画可以直接应用到初始 ，过渡需要从开始先等hover一次*/
    }
    /* 可以直接写成 #banana,#apple{ 多个选择器应用多个关键帧} */
    /* animation-play-state可以用来停止和启动动画 */
    /* 伪类选择器:hover直接改变 */
    /* 定义动画属性 */
    #banana:hover{
        /* -webkit-transition 逐渐过渡 */
        -webkit-animation-delay: 100ms;
        /* 持续时间 */
        -webkit-animation-duration: 2500ms;
        /* 循环次数 */
        -webkit-animation-iteration-count: 2;
        /* 变化速率 */
        -webkit-animation-timing-function: linear;
        /* 分两部分 */
        -webkit-animation-name: 'GrowShrink';
        /* 重复方向 */
        -webkit-animation-direction: alternate;
    }
    /* 使用@key-frames规则创建，用来定义应用动画的属性 */
    @-webkit-keyframes GrowShrink{
        /* 关键帧 */
        /* from初始值 */
        from{
            font-size: xx-small;
            background-color: red;
        }
        /* 中间关键帧 百分数 */
        50%{
            background-color: yellow;
            padding: 1px;
        }
        75%{
            color: orange;
            padding: 2px;
        }
        /* to最终值 */
        to {
            font-size: x-large;
            border: medium solid white;
            background-color: green;
            color: white;
            padding: 4px;
        }
    }
</style>

<body>
    <p>
        There are lots of different kinds of fruit - there are over 500 varieties
        of <span id="banana">banana</span> alone. By the time we add the countless
        types of <span id="apple">apples</span>, oranges, and other well-known fruit, we are faced with thousands of choides.
    </p>
</body>

</html>